<template>
	<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
		<view class="navbar-content">
			<view class="navbar-left" @tap="handleBack" v-if="showBack">
				<text class="back-icon">←</text>
			</view>
			<view class="navbar-center">
				<image v-if="showLogo" class="app-logo" src="/static/icons/logo.png" mode="aspectFit"></image>
				<text class="navbar-title">{{ title }}</text>
			</view>
			<view class="navbar-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomNavbar',
	props: {
		title: {
			type: String,
			default: '合一个'
		},
		showBack: {
			type: Boolean,
			default: false
		},
		showLogo: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			statusBarHeight: 44
		}
	},
	mounted() {
		// 获取系统状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 44;
	},
	methods: {
		handleBack() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.custom-navbar {
	background: transparent;
	position: relative;
	z-index: 999;
	
	.navbar-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		
		.navbar-left {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.back-icon {
				font-size: 36rpx;
				color: #000000;
				font-weight: bold;
			}
		}
		
		.navbar-center {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.app-logo {
				width: 72rpx;
				height: 72rpx;
				margin-right: 20rpx;
			}
			
			.navbar-title {
				font-size: 40rpx;
				font-weight: 700;
				color: #000000;
				text-align: center;
				width: 100%;
			}
		}
		
		.navbar-right {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>